<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:62:"D:\phpStudy\WWW\lvyou/./application/home\view\index\index.html";i:1531276672;}*/ ?>
<!DOCTYPE html>
<html>
<head>
    <title>银城海外利华航</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.6, minimum-scale=0.6, maximum-scale=0.6, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <style>
        html,
        body {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0 0;
            overflow: hidden;
            font-family: 'Lato', sans-serif;
            background-color: #000;
            color: #fff;
            -webkit-touch-callout:none;
            -webkit-user-select:none;
            -khtml-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .world {
            position: absolute;
            width: 100%;
            height: 100%;
            cursor: pointer;
            cursor: move;
            cursor: -moz-grab;
            cursor: -webkit-grab;
            cursor: grab;
        }
        .world-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            background-position: 50% 50%;
            background-size: cover;
        }
        .world-globe {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 0;
            height: 0;
        }
        .world-globe-pole {
            position: absolute;
            width: 530px;
            height: 530px;
            left: -265px;
            top: -265px;
            border-radius: 50% 50%;
            background-color: #fff;
        }
        .world-globe-doms-container {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 0;
            height: 0;
        }
        .world-globe-halo {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 730px;
            height: 715px;
            margin-left: -368px;
            margin-top: -350px;
        }
        .info {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            padding: 10px 10px;
            box-sizing: border-box;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            font-size: 12px;
        }
        .info-desc {
            color: #ddd;
            font-size: 10px;
        }
        a {
            color: #ff5f5f;
        }



        .lastttt{
            position: absolute;
            display: inline-block;
            left: 50%;
            bottom:7%;
            width:200px;
            height:200px;
            margin-left: -100px;
            background-image: url('/static/image/lvyou/btn_show.png');
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: auto 100%;
            z-index: 2;
            border-radius: 50%;
        }
        .lastleft{
            position: absolute;
            display: inline-block;
            left: 5%;
            bottom:7%;
            width:170px;
            height:100px;
            line-height: 100px;
            border-radius: 50px;
            background-image: url('/static/image/lvyou/btn_left2.png');
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: auto 100%;
        }
        .lastright{
            position: absolute;
            display: inline-block;
            right: 5%;
            bottom:7%;
            width:170px;
            height:100px;
           line-height: 100px;
            border-radius: 50px;
            background-image: url('/static/image/lvyou/btn_right2.png');
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: auto 100%;
        }
        video{
            position: absolute;
            width:100%;
            height:100%;
            top:0;
            left:0;
            z-index:1;display: none;
        }
        .toptitle{
            position: absolute;top: 0;height: 120px;width: 100%;
            line-height: 120px;z-index: 99999;
            text-align: center;
            background-image: url('/static/image/top.png');
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: auto 100%;
        }
    </style>
</head>
<body leftmargin=0 topmargin=0 oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onselect='document.selection.empty()' oncopy='document.selection.empty()' onbeforecopy='return false' onmouseup='document.selection.empty()'>
<p class="toptitle"></p>
<div class="world">
    <div class="world-bg"></div>
    <div class="world-globe">
        <div class="world-globe-pole"></div>
        <div class="world-globe-doms-container"></div>
        <div class="world-globe-halo"></div>
    </div>
</div>
<audio src="/static/image/bg.mp3" loop="loop" autoplay="autoplay" id="audio">
    您的浏览器不支持 audio 标签
</audio>
<!--<div class="info">-->
    <!--<div class="info-title">1234567890</div>-->
<!--</div>-->

<div class="lastttt" ontouchend="touchend(this)" ontouchmove="touchmove(this)" ontouchstart="touchstart(this);" > </div>
<div class="lastleft" onclick="location.href = '<?php echo U('home/City/index'); ?>';"></div>
<div class="lastright" onclick="location.href = '<?php echo U('home/Index/long'); ?>';"></div>
<!--<div class="lastttt" onclick="touchstart(this);" > </div>-->





    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
<script src='/static/js/dat.gui.min.js'></script>
<script src='/static/js/Stats.js'></script>
<script src='/static/js/css_globe_PerspectiveTransform.js'></script>
<script src='/static/js/TweenMax.min.js'></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    //=================自动播放音频=================
    function autoPlayAudio1(){
        wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
            debug: false,
            appId:'',
        timestamp: 1,
            nonceStr:'',
        signature:'',
        jsApiList: []
    });
        wx.ready(function() {
            document.getElementById('audio').pause();
            document.getElementById('audio').play();
        });
    }
    autoPlayAudio1();
    //=================end=================
    //开始长按
    function touchstart(el){
        timeOutEvent=setTimeout(function(){
            var lat222=config.lat;
            var lng222=config.lng;
//    alert(lat222+'||||'+lng222);
            var a=GetDistance(allDate[0].lat,allDate[0].lng,lat222,lng222);
            var b=GetDistance(allDate[1].lat,allDate[1].lng,lat222,lng222);
            var c=GetDistance(allDate[2].lat,allDate[2].lng,lat222,lng222);
            var d=GetDistance(allDate[3].lat,allDate[3].lng,lat222,lng222);



            var min=0;
            min=a<b?a:b;
            min=min<c?min:c;
            min=min<d?min:d;

            if(min==a){
                goTo(allDate[0].lat,allDate[0].lng,'a');
            }else if(min==b){
                goTo(allDate[1].lat,allDate[1].lng,'b');
            }else if(min==c){
                goTo(allDate[2].lat,allDate[2].lng,'c');
            }else if(min==d){
                goTo(allDate[3].lat,allDate[3].lng,'d');
            }
        },200);

    }
    //触摸移动
    function touchmove(el){

        clearTimeout(timeOutEvent);
        config.zoom=0;

    }

    function touchend(el){
        clearTimeout(timeOutEvent);
        config.zoom=0;
    }

    function goTo(lat, lng,who) {

        console.log(lat+"|||"+config.lat);
        console.log(lng+"|||"+config.lng);
//    alert(who)
        var dX = lat - config.lat;
        var dY = lng - config.lng;
        var roughDistance = Math.sqrt(dX * dX + dY * dY);

        isTweening = true;
        TweenMax.to(config, roughDistance * 0.01, {
            lat: lat,
            lng: lng,
            ease: 'easeInOutSine'
        });
        TweenMax.to(config, 1, {
            delay: roughDistance * 0.01,
            zoom: 1,
            ease: 'easeInOutSine',
            onComplete: function() {
                isTweening = false;
                window.location.href = "<?php echo U('home/Index/video'); ?>?who=" + who;
                config.zoom=0;
            }
        });
    }

    var allDate=[
        {"lng":-73.866396,"lat":40.844401},//niuyue
        {"lng":133.223037,"lat":-24.214881},//aoda
        {"lng":-8.804095,"lat":32.702848},//moluoge,
        {"lng":139.772475,"lat":35.848345}];//dongj,

    var one='';
    function aaa(){
        var lat222=config.lat;
        var lng222=config.lng;

        var a=GetDistance(allDate[0].lat,allDate[0].lng,lat222,lng222);
        var b=GetDistance(allDate[1].lat,allDate[1].lng,lat222,lng222);
        var c=GetDistance(allDate[2].lat,allDate[2].lng,lat222,lng222);
        var d=GetDistance(allDate[3].lat,allDate[3].lng,lat222,lng222);



        var min=0;
        min=a<b?a:b;
        min=min<c?min:c;
        min=min<d?min:d;

        if(min==a){
            goTo(allDate[0].lat,allDate[0].lng);
        }else if(min==b){
            goTo(allDate[1].lat,allDate[1].lng);
        }else if(min==c){
            goTo(allDate[2].lat,allDate[2].lng);
        }else if(min==d){
            goTo(allDate[3].lat,allDate[3].lng);
        }


    }

    function Rad(d) {
        return d * Math.PI / 180.0;
        //经纬度转换成三角函数中度分表形式。
    }

    function GetDistance(lat1, lng1, lat2, lng2) {

        var radLat1 = Rad(lat1);
        var radLat2 = Rad(lat2);
        var a = radLat1 - radLat2;
        var b = Rad(lng1) - Rad(lng2);
        var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
        s = s * 6378.137;
        // EARTH_RADIUS;
        s = Math.round(s * 10000) / 10000;
        //输出为公里
        //s=s.toFixed(4);

        return s * 1000;
    }


    var config = {
        percent: 0,
        lat: 0,
        lng: 0,
        segX: 14,
        segY: 12,
        isHaloVisible: true,
        isPoleVisible: true,
        autoSpin: true,
        zoom: 0,

        skipPreloaderAnimation: false,

        goToBristol: function() {
            goTo(51.4500, 2.5833,'0');
        }
    };

    var stats;
    var imgs;
    var preloader;
    var preloadPercent;
    var globeDoms;
    var vertices;

    var world;
    var worldBg;
    var globe;
    var globeContainer;
    var globePole;
    var globeHalo;

    var pixelExpandOffset = 1.5;
    var rX = 0;
    var rY = 0;
    var rZ = 0;
    var sinRX;
    var sinRY;
    var sinRZ;
    var cosRX;
    var cosRY;
    var cosRZ;
    var dragX;
    var dragY;
    var dragLat;
    var dragLng;

    var isMouseDown = false;
    var isTweening = false;
    var tick = 1;

    var URLS = {
        bg: '/static/image/lvyou/css_globe_bg.jpg',
        //diffuse: 'http://wow.techbrood.com/uploads/160401/css_globe_diffuse.jpg',
        diffuse: '/static/image/lvyou/css_globe_diffuse.jpg',
        halo: '/static/image/lvyou/css_globe_halo.png',
    };

    var transformStyleName = PerspectiveTransform.transformStyleName;

    function init(ref) {
        world = document.querySelector('.world');
        worldBg = document.querySelector('.world-bg');
        worldBg.style.backgroundImage = 'url(' + URLS.bg + ')';
        globe = document.querySelector('.world-globe');
        globeContainer = document.querySelector('.world-globe-doms-container');
        globePole = document.querySelector('.world-globe-pole');
        globeHalo = document.querySelector('.world-globe-halo');
        globeHalo.style.backgroundImage = 'url(' + URLS.halo + ')';


        regenerateGlobe();

        var gui = new dat.GUI();
        gui.add(config, 'lat', -90, 90).listen();
        gui.add(config, 'lng', -180, 180).listen();
        gui.add(config, 'isHaloVisible');
        gui.add(config, 'isPoleVisible');
        gui.add(config, 'autoSpin');
        gui.add(config, 'goToBristol');
        gui.add(config, 'zoom', 0, 1).listen();

        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = 0;
        stats.domElement.style.top = 0;
        document.body.appendChild(stats.domElement);

        // events
        world.ondragstart = function() {
            return false;
        };
        world.addEventListener('mousedown', onMouseDown);
        world.addEventListener('mousemove', onMouseMove);
        world.addEventListener('mouseup', onMouseUp);
        world.addEventListener('touchstart', touchPass(onMouseDown));
        world.addEventListener('touchmove', touchPass(onMouseMove));
        world.addEventListener('touchend', touchPass(onMouseUp));
        //==============隐藏面板================
        $('.dg').css('display','none');
        $('#stats').css('display','none');
        //===============end===============
        loop();
    }

    function touchPass(func) {
        return function(evt) {
            evt.preventDefault();
            func.call(this, {
                pageX: evt.changedTouches[0].pageX,
                pageY: evt.changedTouches[0].pageY
            });
        };
    }

    function onMouseDown(evt) {
        isMouseDown = true;
        dragX = evt.pageX;
        dragY = evt.pageY;
        dragLat = config.lat;
        dragLng = config.lng;
    }

    function onMouseMove(evt) {
        if (isMouseDown) {
            var dX = evt.pageX - dragX;
            var dY = evt.pageY - dragY;
            config.lat = clamp(dragLat + dY * 0.5, -90, 90);
            config.lng = clampLng(dragLng - dX * 0.5, -180, 180);
        }
    }

    function onMouseUp(evt) {
        if (isMouseDown) {
            isMouseDown = false;
        }
    }

    function regenerateGlobe() {
        var dom, domStyle;
        var x, y;
        globeDoms = [];
        while (dom = globeContainer.firstChild) {
            globeContainer.removeChild(dom);
        }

        var segX = config.segX;
        var segY = config.segY;
        var diffuseImgBackgroundStyle = 'url(' + URLS.diffuse + ')';
        var segWidth = 1600 / segX | 0;
        var segHeight = 800 / segY | 0;

        vertices = [];

        var verticesRow;
        var radius = (536) / 2;

        var phiStart = 0;
        var phiLength = Math.PI * 2;

        var thetaStart = 0;
        var thetaLength = Math.PI;

        for (y = 0; y <= segY; y++) {

            verticesRow = [];

            for (x = 0; x <= segX; x++) {

                var u = x / segX;
                var v = 0.05 + y / segY * (1 - 0.1);

                var vertex = {
                    x: -radius * Math.cos(phiStart + u * phiLength) * Math.sin(thetaStart + v * thetaLength),
                    y: -radius * Math.cos(thetaStart + v * thetaLength),
                    z: radius * Math.sin(phiStart + u * phiLength) * Math.sin(thetaStart + v * thetaLength),
                    phi: phiStart + u * phiLength,
                    theta: thetaStart + v * thetaLength
                };
                verticesRow.push(vertex);
            }
            vertices.push(verticesRow);
        }

        for (y = 0; y < segY; ++y) {
            for (x = 0; x < segX; ++x) {
                dom = document.createElement('div');
                domStyle = dom.style;
                domStyle.position = 'absolute';
                domStyle.width = segWidth + 'px';
                domStyle.height = segHeight + 'px';
                domStyle.overflow = 'hidden';
                domStyle[PerspectiveTransform.transformOriginStyleName] = '0 0';
                domStyle.backgroundImage = diffuseImgBackgroundStyle;
                dom.perspectiveTransform = new PerspectiveTransform(dom, segWidth, segHeight);
                dom.topLeft = vertices[y][x];
                dom.topRight = vertices[y][x + 1];
                dom.bottomLeft = vertices[y + 1][x];
                dom.bottomRight = vertices[y + 1][x + 1];
                domStyle.backgroundPosition = (-segWidth * x) + 'px ' + (-segHeight * y) + 'px';
                globeContainer.appendChild(dom);
                globeDoms.push(dom);
            }
        }

    }

    function loop() {
        requestAnimationFrame(loop);
        stats.begin();
        render();
        stats.end();
    }

    function render() {

        if (config.autoSpin && !isMouseDown && !isTweening) {
            config.lng = clampLng(config.lng - 0.2);
        }

        rX = config.lat / 180 * Math.PI;
        rY = (clampLng(config.lng) - 270) / 180 * Math.PI;

        globePole.style.display = config.isPoleVisible ? 'block' : 'none';
        globeHalo.style.display = config.isHaloVisible ? 'block' : 'none';

        var ratio = Math.pow(config.zoom, 1.5);
        pixelExpandOffset = 1.5 + (ratio) * -1.25;
        ratio = 1 + ratio * 3;
        globe.style[transformStyleName] = 'scale3d(' + ratio + ',' + ratio + ',1)';
        ratio = 1 + Math.pow(config.zoom, 3) * 0.3;
        worldBg.style[transformStyleName] = 'scale3d(' + ratio + ',' + ratio + ',1)';

        transformGlobe();
    }

    function clamp(x, min, max) {
        return x < min ? min : x > max ? max : x;
    }

    function clampLng(lng) {
        return ((lng + 180) % 360) - 180;
    }

    function transformGlobe() {

        var dom, perspectiveTransform;
        var x, y, v1, v2, v3, v4, vertex, verticesRow, i, len;
        if (tick ^= 1) {
            console.log(rY);
            sinRY = Math.sin(rY);
            sinRX = Math.sin(-rX);
            sinRZ = Math.sin(rZ);
            cosRY = Math.cos(rY);
            cosRX = Math.cos(-rX);
            cosRZ = Math.cos(rZ);

            var segX = config.segX;
            var segY = config.segY;

            for (y = 0; y <= segY; y++) {
                verticesRow = vertices[y];
                for (x = 0; x <= segX; x++) {
                    rotate(vertex = verticesRow[x], vertex.x, vertex.y, vertex.z);
                }
            }

            for (y = 0; y < segY; y++) {
                for (x = 0; x < segX; x++) {
                    dom = globeDoms[x + segX * y];

                    v1 = dom.topLeft;
                    v2 = dom.topRight;
                    v3 = dom.bottomLeft;
                    v4 = dom.bottomRight;

                    expand(v1, v2);
                    expand(v2, v3);
                    expand(v3, v4);
                    expand(v4, v1);

                    perspectiveTransform = dom.perspectiveTransform;
                    perspectiveTransform.topLeft.x = v1.tx;
                    perspectiveTransform.topLeft.y = v1.ty;
                    perspectiveTransform.topRight.x = v2.tx;
                    perspectiveTransform.topRight.y = v2.ty;
                    perspectiveTransform.bottomLeft.x = v3.tx;
                    perspectiveTransform.bottomLeft.y = v3.ty;
                    perspectiveTransform.bottomRight.x = v4.tx;
                    perspectiveTransform.bottomRight.y = v4.ty;
                    perspectiveTransform.hasError = perspectiveTransform.checkError();

                    if (!(perspectiveTransform.hasError = perspectiveTransform.checkError())) {
                        perspectiveTransform.calc();
                    }
                }
            }
        } else {
            for (i = 0, len = globeDoms.length; i < len; i++) {
                perspectiveTransform = globeDoms[i].perspectiveTransform;
                if (!perspectiveTransform.hasError) {
                    perspectiveTransform.update();
                } else {
                    perspectiveTransform.style[transformStyleName] = 'translate3d(-8192px, 0, 0)';
                }
            }
        }
    }



    function rotate(vertex, x, y, z) {
        x0 = x * cosRY - z * sinRY;
        z0 = z * cosRY + x * sinRY;
        y0 = y * cosRX - z0 * sinRX;
        z0 = z0 * cosRX + y * sinRX;

        var offset = 1 + (z0 / 4000);
        x1 = x0 * cosRZ - y0 * sinRZ;
        y0 = y0 * cosRZ + x0 * sinRZ;

        vertex.px = x1 * offset;
        vertex.py = y0 * offset;
    }

    // shameless stole and edited from threejs CanvasRenderer
    function expand(v1, v2) {

        var x = v2.px - v1.px,
            y = v2.py - v1.py,
            det = x * x + y * y,
            idet;

        if (det === 0) {
            v1.tx = v1.px;
            v1.ty = v1.py;
            v2.tx = v2.px;
            v2.ty = v2.py;
            return;
        }

        idet = pixelExpandOffset / Math.sqrt(det);

        x *= idet;
        y *= idet;

        v2.tx = v2.px + x;
        v2.ty = v2.py + y;
        v1.tx = v1.px - x;
        v1.ty = v1.py - y;

    }

    init();
</script>

</body>
</html>